<template>
  <div>
    <div class="nav">
      <van-nav-bar
        title="订单结算"
        left-text="返回"
        left-arrow
        @click-left="back()"
      />
    </div>

    <van-popup v-model="show" position="bottom">
      <div>
        <van-address-list
          @select="changeaddress"
          color:blue
          v-model="chosenAddressId"
          :list="list"
          default-tag-text="默认"
          @add="onAdd"
          @edit="getAid"
        />
      </div>
    </van-popup>

    <!-- 选择地址 -->
    <div class="select">
      <div class="select-item" @click="showCity">选择地址</div>
      <div class="select-items">
        <div class="itemname">{{ defaultAddress.name }}</div>
        <div class="itemtel">{{ defaultAddress.tel }}</div>
        <div class="itemicon" v-show="nullstyle">
          <van-tag
            round
            type="primary"
            v-if="this.chosenAddressId != 0 && this.defaultAddress != 0"
            >默认</van-tag
          >
        </div>
      </div>
      <div class="select-item">{{ defaultAddress.address }}</div>
    </div>

    <van-empty
      v-show="!pronull"
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="暂无订单信息"
    />
    <!-- 订单信息 -->
    <div class="order-desc" v-show="pronull">
      <div class="pro" v-for="(item, index) in pro" :key="index">
        <van-swipe-cell>
          <div class="pro-desc">
            <div class="center">
              <img class="auto" :src="item.small_img" alt="" />
            </div>
            <div class="right">
              <div class="name-rule">
                {{ item.name }}<span>{{ item.rule }}</span>
              </div>
              <div class="enname">
                {{ item.enname }}
              </div>
              <div class="proprice">
                <div class="price">￥{{ item.price }}</div>
                <div class="count">x{{ item.count }}</div>
              </div>
            </div>
          </div>
        </van-swipe-cell>
      </div>
      <div class="deom">
        <div class="time">{{ timers }}</div>
        <div class="allcount">
          <div class="procount">共计{{ prototal }}件</div>
          <div class="pricetotal">合计 ￥{{ pricetotal }}</div>
        </div>
      </div>
    </div>
    <div class="bottombtn">
      <van-button type="primary" @click="pay">立即结算</van-button>
    </div>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
export default {
  name: "pay",
  data() {
    return {
      pronull: false,
      nullstyle: false,
      pricetotal: 0,
      prototal: 0,
      sid: [],
      editshow: false,
      show: false,
      areaList: areaList,
      appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
      tokenString: this.$cookies.get("TOKEN"),
      pro: [],
      timers: "",
      str: "",
      chosenAddressId: "1",
      list: [],
      defaultAddress: {},
    };
  },
  created() {
    let allSid = this.$route.query.a;
    this.sid = allSid;

    this.getCurrentTime();
    this.commitShopBsg(allSid);
    this.findAddress();
  },
  methods: {
    //点击获取地址aid
    getAid(e) {
      console.log(e);
      let a = e.aid;
      this.$router.push({ name: "Editaddress", query: { a, b: true } });
    },
    changeaddress(e) {
      this.defaultAddress = e;
    },
    // 结算
    pay() {
      let str = `appkey=${this.appkey}&tokenString=${this.tokenString}&sids=${this.sid}&phone=${this.defaultAddress.tel}&address=${this.defaultAddress.address}&receiver=${this.defaultAddress.receiver}`;
      this.axios({
        method: "post",
        url: "/pay",
        data: str,
      }).then((res) => {
        if (res.data.code == 60000) {
          this.$toast.loading({
            message: "加载中...",
            forbidClick: true,
            duration: 1500,
          });
          setTimeout(() => {
            this.$router.push({ name: "Order" });
          }, 1000);
        }
        console.log(res);
      });
    },
    // 查询地址
    findAddress() {
      this.axios({
        method: "get",
        url: "findAddress",
        params: {
          appkey: this.appkey,
          tokenString: this.tokenString,
        },
      }).then((res) => {
        res.data.result.forEach((item) => {
          console.log(item);
          let str = `${item.province}${item.city}${item.county}${item.addressDetail}`;
          this.list.push(item);
          item.address = str;
        });
        //筛选默认地址
        this.list.forEach((item) => {
          if (item.isDefault == 1) {
            this.chosenAddressId = item.id;
            console.log("这是默认的地址==>", res);
            this.defaultAddress = item;
          }
        });
        if (res.data.result.length == 0) {
          this.nullstyle = false;
        } else {
          this.nullstyle = true;
        }
        console.log("这是地址信息==>", res);
      });
    },
    onAdd() {
      this.$router.push({ name: "Editaddress" });
    },
    onEdit(item, index) {
      Toast("编辑地址:" + index);
    },
    //显示市区
    showCity() {
      this.show = !this.show;
    },
    //获取当前日期
    getCurrentTime() {
      let db = new Date();
      console.log(db);
      //年
      let year = db.getFullYear();
      console.log(year);
      //月
      let month = db.getMonth() + 1;
      console.log(month);
      //日
      let day = db.getDate();
      console.log(day);
      //时
      let hours = db.getHours();
      console.log(hours);
      //分
      let min = db.getMinutes();
      console.log(min);
      //秒
      let sec = db.getSeconds();
      console.log(sec);
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      hours = hours > 9 ? hours : "0" + hours;
      min = min > 9 ? min : "0" + min;
      sec = sec > 9 ? sec : "0" + sec;

      let timer =
        year + "-" + month + "-" + day + "-" + hours + ":" + min + ":" + sec;
      console.log(timer);
      this.timers = timer;
    },
    back() {
      this.$router.push({ name: "Bag" });
    },
    commitShopBsg(sids) {
      this.axios({
        method: "get",
        url: "/commitShopcart",
        params: {
          appkey: this.appkey,
          tokenString: this.tokenString,
          sids,
        },
      }).then((res) => {
        res.data.result.forEach((v) => {
          this.prototal += v.count;
          this.pricetotal += v.count * v.price;
          console.log(this.pricetotal);
        });

        if (res.data.result.length == 0) {
          this.pronull = false;
        } else {
          this.pronull = true;
        }

        this.pro = res.data.result;
        console.log(res);
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-address-list {
  overflow: scroll;
  text-align: center;
  margin: auto;
  height: auto;
}
/deep/.van-tag--round {
  margin: left 10px;
}
/deep/.van-button--primary {
  background-color: #0c34ba;
  border: 1px solid #0c34ba;
  width: 350px;
  border-radius: 30px;
  margin-left: 13px;
}
.bottombtn {
  position: fixed;
  bottom: 0;
}
/deep/.van-button--danger {
  background-color: #0c34ba;
  border: 1px solid #0c34ba;
}
/deep/.van-button::before {
  top: 0;
}
/deep/.van-tag--danger {
  background-color: #0c34ba;
}
/deep/.van-address-item .van-radio__icon--checked .van-icon {
  background-color: blue;
  border-color: blue;
}
// /deep/.van-icon-edit:before {
//   content: none;
// }
/deep/.van-address-list__bottom {
  background-color: none;
}

.allcount {
  justify-content: space-between;
  display: flex;
  margin-top: 20px;
  .pricetotal {
    margin-right: 10px;
    font-weight: bold;
    color: #0c34ba;
    font-size: 12px;
  }
}
.pro-desc {
  margin: 10px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  .center {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    margin: 10px;
  }
  .right {
    flex: 1;
    height: 100px;
    .name-rule {
      font-size: 14px;
    }
    .enname {
      color: #acacac;
      margin-top: 10px;
    }
    .name-rule span {
      font-size: 12px;
      margin-left: 12px;
      color: #acacac;
    }
    .proprice {
      margin-top: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .price {
        font-size: 14px;
        font-weight: bold;
        color: #0c34ba;
      }
      .count {
        margin-right: 18px;
      }
    }
  }
}
.demo {
  border-bottom: 1px dashed #000;
  height: 200px;
  background-color: red;
}
.order-desc {
  margin: 8px 6px;
  background-color: #fff;
  padding: 5px;
  border-radius: 10px;
  padding-bottom: 20px;
  .order-title {
    margin: 5px 0;
  }
}
.select {
  background-color: #fff;
  margin: 8px 6px;
  border-radius: 10px;
  padding: 5px;
  line-height: 30px;
  .select-items {
    display: flex;
    .itemname {
      color: #0c34ba;
      font-weight: bold;
    }
    .itemtel {
      margin-left: 10px;
    }
  }
}
</style>